<template>
  <div class="father">
    <span v-color="color1">我是父组件</span>
    <h3>{{ msg }}</h3>
    <HelloWorld :msg1="msg" @changeTitle="changeMsg"></HelloWorld>
    <span v-color="color2">我修改了我自己的标题</span>
    <button @click="changeson">修改</button>
    <hello :msg="msg"></hello> //:表示动态传值
  </div>

</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Hello from './components/Hello.vue'
const color = {
  mounted: (el) => el.style.color = 'red',
  updated: (el, binding) => el.style.color = binding.value
}
export default {
  name: 'App',
  components: {
    HelloWorld,
    Hello
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      color1:'red',
      color2:'blue'
    }
  },
  methods: {
    changeMsg(msg) {
      console.log(msg)
      this.msg = msg
    },
    changeson() {
      this.msg = '这是我的标题，我修改了自己的标题'
    }

  },
   directives: {
    // 在模板中启用 v-focus
    color
  }
}
</script>

<style>
.father {
  border: 1px solid #000;
}
</style>
